<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
        background-color: black;
    }
    .run {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: transparent;
      overflow: hidden;
      animation: bearDivAimation 3s linear 1 forwards;
      z-index: 9999;
    }

    .run img {
      animation: bearAimation 1s steps(8) infinite; 
    }

    @keyframes bearAimation {
      from {
        transform: translateX(0px);
      }

      to {
        transform: translateX(-1600px);
      }
    }

    @keyframes bearDivAimation {
      from {
        left: 0px;
      }

      to {
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .container {
      float: left;
      position: relative;
      width: 100%;
      height: 1000px;
    }

    .bear_bg1 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 300px;
      background: url("../img/bear_bg1.png") repeat-x;
      background-size: 3428.6px 300px;
      background-position: left bottom;
      opacity: 0.9;
      z-index: 1000;
      filter: brightness(0.95);
      animation: bg1run 30s linear infinite;
    }

    .bear_bg2 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 400px;
      background: url("../img/bear_bg1.png") repeat-x;
      background-size: 4571.43px 400px;
      background-position: left bottom;
      opacity: 0.8;
      z-index: 100;
      animation: bg2run 35s linear infinite;
    }
    .bear_bg3 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 450px;
      background: url("../img/bear_bg2.png") repeat-x;
      background-size: 3036.91px 450px;
      background-position:left bottom;
      filter: brightness(2);
      opacity: 0.8;
      z-index: 10;
      animation: bg3run 40s linear infinite;
    }

    .bear_bg4 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 569px;
      background: url("../img/bear_bg2.png") repeat-x;
      background-size: 3840px 569px;
      background-position:left bottom;
      filter: brightness(1.5) opacity(0.8);
      z-index: 1;
      animation: bg4run 45s linear infinite;
    }
    @keyframes bg1run {
      0%{
        background-position: 0 0;
      }
      100%{
        background-position: -3428.6px 0;
      }
    }
   
    @keyframes bg2run {
      0%{
        background-position: 0 0;
      }
      100%{
        background-position: -4571.43px 0;
      }
    }
    @keyframes bg3run {
      0%{
        background-position: 0 0;
      }
      100%{
        background-position: -3036.91px 0;
      }
    }
    @keyframes bg4run {
      0%{
        background-position: 0 0;
      }
      100%{
        background-position: -3840px 0;
      }
    }
  </style>
</head>

<body>
 <!--  
      动画连续移动技巧1 --- 1倍背景
      移动 background-position: -3840px 0; 
      设置 repeat-x 连续移动时 画面不断裂
 -->
  <div class="container">
    <div class="bear_bg1"></div>
    <div class="bear_bg2"></div>
    <div class="bear_bg3"></div>
    <div class="bear_bg4"></div>
    <div class="run">
      <img src="../img/bear.png" alt="">
    </div>
  </div>

</body>

</html>